<template>
	<el-container>
		<el-header>
			<el-page-header icon="el-icon-close" title="关闭" :content="data.name" @back="goBack"></el-page-header>
			<div class="do">
				<el-dropdown @command="changeFlow" trigger="click" v-if="typeof(modelId)=='undefined'">
					<el-button text>
						<div v-if="flowItem==null">
							切换版本<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
						</div>
						<div v-else>
							V{{ flowItem.flowVersion }}<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
						</div>
					</el-button>

					<template #dropdown >
						<el-dropdown-menu>
							<el-dropdown-item icon="el-icon-document" v-for="(item,index) in flowList" :key="index" :command="beforeCommand(item)">
								V{{ item.flowVersion }}
								<span v-if="item.flowDefault == 1">(当前版本)</span>
							</el-dropdown-item>
							<el-dropdown-item icon="el-icon-document">
								新建流程
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-button  round icon="el-icon-download" @click="updateFlowDefault" v-if="typeof(modelId)=='undefined'">设为模板</el-button>
				<!--el-button type="warning" round icon="el-icon-download" @click="exportJson">导出流程</el-button-->
				<el-button round plain type="primary"   @click="check" icon="el-icon-view">校验</el-button>
				<el-button round type="primary" icon="el-icon-position" @click="save">发布</el-button>
			</div>
		</el-header>
		<el-main>
			<jd-workflow ref="workflow" v-model="data"></jd-workflow>
		</el-main>
	</el-container>

	<check-dialog v-if="dialog.checkDialog"  ref="createDialog" :process-data="data"  @closed="dialog.checkDialog=false"></check-dialog>
</template>

<script>
import jdWorkflow from '@/components/jdWorkflow'
import CheckDialog from "@/views/app/store/dialog/checkDialog.vue";
export default {
	name: 'workflow',
	components: {
		CheckDialog,
		jdWorkflow
	},
	provide(){
		return {
			flowModelData:  this.getData
		}
	},
	computed: {
		getData() {
			return this.data
		}
	},
	data() {
		return {
			dialog: {
				checkDialog: false
			},
			data: {
				"name": "流程发起",
				"nodeConfig": {
					"id": 'root',
					"nodeName": "发起人",
					"type": 0,
					"nodeRoleList": [],
					"submitBtn":true,
					"submitBtnText":'提交',
					"draftBtn":true,
					"draftBtnText":'草稿',
					"recallBtn":true,
					"recallBtnText":'撤回',
					"pressBtn":true,
					"pressBtnText":'催办',
					"printBtn":false,
					"printBtnText":'打印',
					"nodeForm":null,
					"dataForm":null,
					"formOption":[],
					"launchEvent":false,
					"launchEventId":null,
					"launchParam":null,
					"endEventId":null,
					"endParam":null,
					"endEvent":false,
					"recallEvent":false,
					"recallEventId":null,
					"recallEventParam":null,
					"waitMsg":'off',
					"waitMsgTemplateId":null,
					"waitMsgTemplateParam":null,
					"endMsg":'off',
					"endTemplateId":null,
					"endMsgTemplateParam":null,
					"successMsg":'off',
					"successTemplateId":null,
					"successTemplateParam":null,
					"refuseMsg":'off',
					"refuseMsgTemplateId":null,
					"refuseMsgTemplateParam":null,
					"copyMsg":'off',
					"copyMsgTemplateId":null,
					"copyMsgTemplateParam":null,
					"passMsg":'off',
					"passTemplateId":null,
					"passMsgTemplateParam":null,
					"props": {
						// 表单配置
						"formPerms": [],
						// 可发起的人员
						"assignedUser": [],
						// 可发起的人员角色
						"assignedRole": [],
					}
				}
			},
			startData: {
				"name": "流程发起",
				"nodeConfig": {
					"id": 'root',
					"nodeName": "发起人",
					"type": 0,
					"nodeRoleList": [],
					"submitBtn":true,
					"submitBtnText":'提交',
					"draftBtn":true,
					"draftBtnText":'草稿',
					"recallBtn":true,
					"recallBtnText":'撤回',
					"pressBtn":true,
					"pressBtnText":'催办',
					"printBtn":false,
					"printBtnText":'打印',
					"nodeForm":null,
					"dataForm":null,
					"formOption":[],
					"launchEvent":false,
					"launchEventId":null,
					"launchParam":null,
					"endEventId":null,
					"endParam":null,
					"endEvent":false,
					"recallEvent":false,
					"recallEventId":null,
					"recallEventParam":null,
					"waitMsg":'off',
					"waitMsgTemplateId":null,
					"waitMsgTemplateParam":null,
					"endMsg":'off',
					"endTemplateId":null,
					"endMsgTemplateParam":null,
					"successMsg":'off',
					"successTemplateId":null,
					"successTemplateParam":null,
					"refuseMsg":'off',
					"refuseMsgTemplateId":null,
					"refuseMsgTemplateParam":null,
					"copyMsg":'off',
					"copyMsgTemplateId":null,
					"copyMsgTemplateParam":null,
					"passMsg":'off',
					"passTemplateId":null,
					"passMsgTemplateParam":null,
					"props": {
						// 表单配置
						"formPerms": [],
						// 可发起的人员
						"assignedUser": [],
						// 可发起的人员角色
						"assignedRole": [],
					}
				}
			},
			// 应用ID
			appId:null,
			// 模板ID
			modelId:null,
			// 流程列表
			flowList:null,
			// 选中的流程版本
			flowItem:null,
			// 流程版本
			flowVersionNum:null,
			// 编辑/新增选择的版本
			flowSelectItem:null,
			form:{}
		}
	},
	mounted() {
		this.appId = this.$route.query.appId;
		this.modelId = this.$route.query.modelId;
		if (typeof(this.modelId) == 'undefined'){
			this.getFlowList()
		}else {
			this.getFlowById()
		}
	},
	methods: {
		// 导出模板
		exportJson() {
			this.$message("返回值请查看F12控制台console.log()")
			console.log(this.data)
		},
		// 检查
		check(){
			this.dialog.checkDialog =true
			this.$nextTick(() =>{
				this.$refs.createDialog.open().setData(this.flowVersionNum);
			})
		},
		// 获取应用流程列表
		async getFlowList() {
			let res = await this.$API.app.flow.getListByAppId.get(this.appId)
			if (res.code == 200){
				this.flowList =res.data;
				res.data.map((item)=>{
					if (item.flowDefault == 1 && this.flowSelectItem == null){
						this.flowItem =item;
						this.data = JSON.parse(item.flowTemplate);
						// 数据保存至全局
						this.$store.commit("SET_FlowData", this.data);
						this.flowVersionNum = item.flowVersion;
					}
				})
			}
		},
		// 根据modelId获取流程
		async getFlowById() {
			let res = await this.$API.app.flow.get.get(this.modelId)
			if (res.code == 200){
				this.flowItem =res.data;
				this.data = JSON.parse(res.data.flowTemplate);
				// 数据保存至全局
				this.$store.commit("SET_FlowData", this.data);
				this.flowVersionNum = res.data.flowVersion;

			}
		},
		// 刷新
		 refresh(data) {
			 this.flowSelectItem =data;
			 this.getFlowList()
		},
		// 保存
		save(){
			this.dialog.checkDialog =true
			this.$nextTick(() =>{
				this.$refs.createDialog.open().setData(this.flowVersionNum);
			})
		},
		// 切换版本
		changeFlow(command){
			if (command.self != null){
				this.data =JSON.parse(command.flowItem.flowTemplate);
				this.flowItem=command.flowItem;
				this.flowVersionNum=command.flowItem.flowVersion;
			}else {
				this.data =this.startData;
				this.flowVersionNum = null;
			}
		},
		// 设为模板
		async updateFlowDefault() {
			this.form.appId = this.appId
			this.form.flowVersion = this.flowItem.flowVersion
			let res = await this.$API.app.flow.updateDefaultFlow.put(this.form)
			if (res.code == 200) {
				this.$message.success("修改成功")
				this.refresh();
			} else {
				this.$message.error("修改失败")
			}
		},
		beforeCommand(command){
			return {
				'self': this,
				'flowItem': command
			}
		},
		// 关闭页面
		goBack() {
			window.opener = null;
			window.open("about:blank", "_top").close()
			console.log('go back');
		}
	}
}
</script>

<style>

</style>
